<template>
  <div>
      <h1>我爱你塞北的大雪</h1>
      <!-- 自定义事件:程序员自己瞎写、胡写、乱写自己定义的事件 -->
      <!--1:第一种写法
         事件源，子组件Child
         事件类型,erha
         回调,是由组件App提供的
         注意：自定义事件触发，需要有程序员自己触发【浏览器：人家不会帮咱们的】
       -->
      <!-- <Child @erha="handler"></Child> -->
       <Child ref="child"></Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  name: '',
  //注册
  components:{
    Child
  },
  //App根组件的方法
  methods: {
    //自定义事件erha的回调函数
    handler(params){
     console.log('父亲的方法',params);
    }
  },
  //生命周期钩子函数
  //代表组件加载完毕，结构完成
  mounted(){
    //获取子组件实例【事件源】
    //第一个参数：自定义事件类型
    //第二个参数：自定义事件回调，当事件源触发$emit方法的时候立即执行
    //  this.$refs.child.$on("erha",function(params){
    //        console.log(params);
    //  });
   //错误的写法
   this.$on('erha',function(params){
        console.log(params);
   });

   console.log(this);
   console.log(this.$refs.child);
  }
}
</script>

<style scoped lang="less">
 @color:red;
 div{
   width: 100%;
   height: 100%;
   background: skyblue;
   h1{
     color: @color;
   }
 }
</style>
